<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>修改广告</title>

    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/st/front/JS/jquery-3.2.1.min.js"></script>

</head>

<body style="text-align: center">
<div class="cBody">
    <h2 style="text-align: center">修改广告</h2>
<%--    <form id="addForm" class="layui-form" action="${pageContext.servletContext.contextPath}/UpAdvers" method="post">--%>
        <div class="layui-form-item">
            <label class="layui-form-label">商品id</label>
            <div class="layui-input-block">
               <input type="text" name="cid" class="layui-input">
            </div>
        </div>
        <br><br>
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <input type="file" name="upFile" id="upFile">
            </div>
        </div>
        <br><br>
        <input type="hidden" name="aid" value="${aid}">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitBut" id="but">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <span style="color: #00F7DE" id="err"></span>
<%--    </form>--%>


    <script>
        jQuery(document).ready(function($) {
            var fileSize = 0 ;

            $("#but").click(function () {
                //验证图片格式是否正确
                var upFile = $("#upFile") ;
                var fileValue = $(upFile).val() ;
                var extStart = fileValue.lastIndexOf(".");
                var ext = fileValue.substring(extStart, fileValue.length).toUpperCase();
                if (ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") {
                    $("#err").html("图片限于png,jpeg,jpg格式");
                    $(upFile).val("");
                    $(upFile).text("");
                    return ;
                }

                var maxSize = 10485760 ;
                if(fileSize > maxSize) {
                    $("#err").html("图片大小不得超过10MB");
                    $(upFile).val("");
                    $(upFile).text("");
                    return ;
                }

                //获取上传的文件
                var formData = new FormData();
                formData.append("uploadFile", $("[name='upFile']")[0].files[0]);
                formData.append("aid",${aid});
                formData.append("cid",$("[name='cid']").val());
                $.ajax({
                    url:'${pageContext.servletContext.contextPath}/upAdv',
                    dataType:'json',
                    type:'POST',
                    data: formData,
                    processData : false, // 使数据不做处理
                    contentType : false, // 不要设置Content-Type请求头
                    success: function(result){
                        if(result) {
                            $("#err").css("color","green") ;
                            $("#err").html("上传成功") ;
                        }
                        else {
                            $("#err").html(result.err) ;
                            //清空upFile
                            $(upFile).val("");
                            $(upFile).text("");
                        }
                    },
                    error:function(response){
                        console.log(response);
                    }
                })
            })


            $("#upFile").change(function (e) {
                fileSize = this.files[0].size ;
            })
        })
    </script>

</div>
</body>

</html>
